<template>
	<view class="give-up-dialog-filter">
		<view class="give-up-dialog-content">
			<view class="give-up-dialog-title">
				{{dialogInfo.title}}
				<image src="@/static/images/projectDetail/give-up-icon-close.png" class="give-up-icon-close" @click="closeDialogFun"></image>
			</view>
			<Tip :tipInfo="tipInfo"></Tip>
			<view class="give-up-dialog-center">
				<u-checkbox-group
					v-model="checkboxValue"
					placement="column"
					@change="checkboxChange"
				>
					<u-checkbox
						activeColor="#26bbff" 
						labelColor="#2D3036"
						labelSize="16px"
						:customStyle="{margin: '14.5px 24px'}"
						v-for="(item, index) in dialogInfo.reason"
						:key="index"
						:label="item"
						:name="item"
					></u-checkbox>
					<view class="flex-start-nowrap alic">
						<u-checkbox
							activeColor="#26bbff" 
							labelColor="#2D3036"
							labelSize="16px"
							:customStyle="{margin: '14.5px 0 14.5px 24px'}"
							name="diy">
						</u-checkbox>
						<view class="" style="border: 1px solid #E7EAEF;" >
							<u-input  :style="{width: isMobile?'80vw':'330px' }" v-model="diy" placeholder="请输入自定义内容"></u-input>
						</view>
						
					</view>
					
				</u-checkbox-group>
			</view>
			<view class="give-up-dialog-footer">
				<view class="give-up-dialog-footer-btns">
					<button class="give-up-btn" @click="closeDialogFun">取消</button>
					<button class="give-up-btn primary" @click="submitFun">确认</button>
				</view>
			</view>
		</view>
		<ToastComp v-if="toastInfo.visible" :toastInfo="toastInfo" @closeToast="closeToast" @canel="cancelFun" @cancel="confirmFun"></ToastComp>
	</view>
</template>

<script>
	import ToastComp from "@/components/ToastComp/ToastComp.vue"
	import Tip from "@/components/Tip/Tip.vue"
	import {
		giveUpTopic
	} from "@/common/api/project.js"
	export default{
		props: {
			dialogInfo:{
				type: Object,
				default: () => {
					return {
						id: '',
						reason: [],
						title:'快捷输入',
					}
				}
			}
		},
		data(){
			return{
				// toast
				toastInfo: {
					visible: false,
					type: 'success',
					title: '',
					subTitle: '',
					cancel: false,
					confirm: false,
					closeShow: false
				},
				checked: true,
				tipInfo: {
					text: '请必勾选一个或者多个原因',
					showIcon: false
				},
				checkboxValue:[],
				reason: '', // 需要提交的错误原因
				diy:uni.getStorageSync('diyText') || '',
			}
		},
		computed:{
			diyC(){
				uni.setStorageSync('diyText',this.diy)
				return  this.diy
			},
		},
		watch:{
			diyC(val){
				if(val !== ''){
					if(!this.checkboxValue.includes('diy')){
						this.checkboxValue.push('diy')
					}
				}else{
					
				}
			}
		},
		methods:{
			checkboxChange(n) {
				console.log('change', n);
				
			},
			closeDialogFun(){
				this.$emit('closeDialog')
			},
			submitFun(){
				if(this.checkboxValue.length === 0){
					uni.showToast({
						title: '请选择原因',
						icon: 'none',
						duration: 1500
					})
					return
				}
				let data = JSON.parse(JSON.stringify(this.checkboxValue))
				let index = data.findIndex(item =>{return item == 'diy'})
				data.splice(index,1,this.diy)
				this.$emit('checkSubmit',data)
				
			},
			
			// tosat
			closeToast(){
				this.toastInfo.visible = false
			},
			// 取消
			cancelFun(){
				this.toastInfo.visible = false
			},
			// 确认
			confirmFun(){
				this.toastInfo.visible = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.give-up-dialog-filter{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
		background: rgba(0, 0, 0, .8);
		display: flex;
		align-items: center;
		justify-content: center;
		.give-up-dialog-content{
			width: 426px;
			background: #FFFFFF;
			border-radius: 8px;
			overflow: hidden;
			.give-up-dialog-title{
				width: 100%;
				height: 54px;
				line-height: 54px;
				font-size: 16px;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #2D3036;
				text-align: center;
				position: relative;
				.give-up-icon-close{
					position: absolute;
					right: 16px;
					top: 16px;
					width: 16px;
					height: 16px;
				}
			}
			.give-up-dialog-center{
				height: 260px;
				overflow-y: auto;
			}
			.give-up-dialog-footer{
				.give-up-dialog-footer-btns{
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}
				background-color: #ffffff;
				text-align: right;
				height: 60px;
				border-top: 1px solid #E7EAEF;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				box-sizing: border-box;
				.give-up-btn{
					&:after{
						border: none !important;
					}
					&:active{
						opacity: .8;
					}
					display: flex;
					align-items: center;
					// width: 108px;
					height: 38px;
					border-radius: 4px;
					color: #979EAA;
					font-size: 14px;
					border: 1px solid #E7EAEF;
					background: #FFFFFF;
					display: inline-block;
					margin-right: 8px;
					cursor: pointer;
				}
				.primary{
					background: #26bbff;
					color: #ffffff;
				}
			}
			
		}
	}
	@media screen and (min-width: 0px) and (max-width:1024px) {
		.give-up-dialog-filter{
			display: block;
			.give-up-dialog-content{
				width: 100%;
				position: absolute;
				bottom: 0;
				left: 0;
				.give-up-dialog-footer{
					justify-content: center;
					.give-up-dialog-footer-btns{
						padding: 0 20px;
						box-sizing: border-box;
						width: 100%;
						justify-content: space-between;
						
						.give-up-btn{
							width: calc(50% - 5px);
							height: 36px;
							margin: 0;
						}
					}
				}	
			}
		}
	}
</style>